<div nz-row>
  <form nz-form [formGroup]="form" (ngSubmit)="submitForm(form.value)">
    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>备注</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="remarkErrorTpl">
        <input nz-input formControlName="remark" placeholder="请输入备注"/>
        <ng-template #remarkErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入备注!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>地址</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="hostErrorTpl">
        <input nz-input formControlName="host" placeholder="请输入地址"/>
        <ng-template #hostErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入地址!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>端口</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="portErrorTpl">
        <input nz-input type="number" formControlName="port" placeholder="请输入端口"/>
        <ng-template #portErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入端口!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="7" nzRequired>用户名</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="usernameErrorTpl">
        <input nz-input formControlName="username" placeholder="请输入用户名"/>
        <ng-template #usernameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入用户名!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="!id">
      <nz-form-label [nzSpan]="7" nzRequired>密码</nz-form-label>
      <nz-form-control [nzSpan]="12" nzHasFeedback [nzErrorTip]="passwordErrorTpl">
        <input nz-input type="password" formControlName="password" placeholder="请输入密码"/>
        <ng-template #passwordErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请输入密码!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzOffset]="7" [nzSpan]="12">
        <button nz-button nzType="primary" [disabled]="!form.valid">提交</button>
        <button nz-button (click)="resetForm($event)">清空</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
